<template>
  <div>
    <div class="admin-top">
      <h3 style="text-align: left; color: #126bff; margin-bottom: 20px">
        重点单位管理11
      </h3>
      <!--         :rules="rules" -->
      <el-form ref="elForm" :model="formData" size="medium" label-width="115px">
        <div class="admin-top-one">
          <el-form-item
            label="所属行政区域 ："
            prop="xzqydm"
            style="width: 400px"
          >
            <el-select
              v-model="formData.xzqydm"
              placeholder="请选择行政区域"
              clearable
              style="float: left"
              :style="{ width: '90%' }"
            >
              <el-option
                v-for="item in xzqydm"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="所属派出所 ："
            prop="ssjwsq"
            style="width: 400px"
          >
            <el-cascader
              ref="xzCascade"
              placeholder="请选择或搜索所属行政区域"
              :options="optionsOne"
              :props="{ checkStrictly: true }"
              filterable
              :emitPath="emitPath"
              clearable
              style="float: left"
              :show-all-levels="false"
              v-model="formData.department_id"
              @change="handleChangexz"
              getCheckedNodes
              :style="{ width: '90%' }"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="单位名称：" prop="dwmc" style="width: 400px">
            <el-input
              v-model="formData.dwmc"
              placeholder="请输入单位名称"
              clearable
              :style="{ width: '90%' }"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="单位类型：" prop="dwlx" style="width: 400px">
            <el-select
              v-model="formData.dwlx"
              clearable
              placeholder="请选择单位类型"
              :style="{ width: '90%' }"
              @change="select"
            >
              <el-option
                v-for="item in dwlx"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="法人代表姓名："
            prop="fddbrxm"
            style="width: 400px"
          >
            <el-input
              v-model="formData.fddbrxm"
              placeholder="请输入法人代表姓名"
              clearable
              :style="{ width: '80%' }"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="添加时段：" prop="time" style="width: 400px">
            <el-date-picker
              type="daterange"
              v-model="formData.time"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :style="{ width: '80%' }"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              range-separator="至"
              clearable
            ></el-date-picker>
          </el-form-item>
          <el-form-item size="small" id="ccBtn" style="float: right">
            <el-button
              @click="resetForm()"
              style="
                background-color: #e6effa;
                color: #126bff;
                margin-left: 10px;
                height: 36px;
                border-radius: 8px 8px 8px 8px;
                opacity: 1;
                font-size: 16px;
                font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                font-weight: 400;
                float: left;
              "
              >重置</el-button
            >
            <el-button
              type="primary"
              @click="submitForm(formData)"
              class="btn"
              style="
                height: 36px;
                float: left;
                background-color: #126bff;
                border-radius: 8px 8px 8px 8px;
                opacity: 1;
                color: #ffffff;
                font-size: 16px;
                font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                font-weight: 400;
                margin-left: 10px;
              "
              >查询</el-button
            >
          </el-form-item>
        </div>
        <!-- <div class="admin-top-one"></div> -->
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="admin-content" style="width: 100%">
      <p style="display: flex; margin-bottom: 10px">
        <el-button
          class="btn"
          style="width: 114px"
          icon="el-icon-plus"
          @click="addUnit"
          >添加单位</el-button
        >
        <el-upload
          action
          accept="'.xlsx', '.xls'"
          :auto-upload="false"
          :before-upload="beforeAvatarUpload"
          :show-file-list="false"
          :on-change="handle"
          :headers="headers"
        >
          <el-button class="btn" icon="iconfont icon-download-copy "
            >导入</el-button
          >
        </el-upload>
        <el-button
          class="btn"
          icon="iconfont icon-upload-copy"
          @click="exportExcel"
          >导出</el-button
        >
        <el-button
          class="btn"
          icon="iconfont icon-download-copy"
          @click="downLoadDemo"
          >下载导入模板</el-button
        >
        <!-- <el-button class="btn" icon="el-icon-delete" @click="deleteTtem"
          >删除</el-button
        > -->
        <!-- <button @click="exportExcel">test</button> -->
      </p>
      <!-- tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize) -->
      <el-table
        :border="true"
        ref="table"
        id="exportTable"
        :data="
          tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
        style="width: 100%; cursor: pointer"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>

        <el-table-column prop="ywlsh" label="序号" width="80" height="50px">
          <template slot-scope="scope">
            {{ scope.$index + 1 + (currentPage - 1) * pageSize }}
          </template>
        </el-table-column>
        <el-table-column prop="xzqydm" label="所属区域" width="150">
        </el-table-column>
        <el-table-column prop="department_name" label="所属派出所" width="200">
        </el-table-column>
        <el-table-column prop="GAJGDWBM" label="公安监管单位编码" width="150">
        </el-table-column>
        <el-table-column prop="dwmc" label="单位名称" width="150">
        </el-table-column>
        <el-table-column prop="tyshxydm" label="统一社会信用代码" width="200">
        </el-table-column>

        <el-table-column prop="dwlx" label="单位类型" width="150">
        </el-table-column>
        <el-table-column prop="fddbrxm" label="法定代表人姓名" width="150">
        </el-table-column>
        <el-table-column
          prop="fddbr_zjhm"
          label="法定代表人证件号码"
          width="200"
        >
        </el-table-column>
        <el-table-column
          prop="fddbrlxfs"
          label="法定代表人联系方式"
          width="170"
        >
        </el-table-column>
        <el-table-column prop="clrq" label="成立日期" width="150">
        </el-table-column>
        <el-table-column prop="zcdz" label="注册地址" width="200">
        </el-table-column>
        <el-table-column prop="sjdz" label="实际办公地址" width="150">
        </el-table-column>
        <el-table-column prop="sjdz_dqjd" label="经度" width="150">
        </el-table-column>
        <el-table-column prop="sjdz_dqwd" label="纬度" width="150">
        </el-table-column>
        <el-table-column prop="djjg" label="登记机关" width="150">
        </el-table-column>
        <el-table-column prop="djzt" label="登记状态" width="150">
        </el-table-column>
        <el-table-column prop="distance" label="打卡范围" width="160">
        </el-table-column>
        <el-table-column prop="remark" label="备注信息" width="160">
        </el-table-column>
        <el-table-column prop="create_time" label="添加时间" width="160">
        </el-table-column>

        <el-table-column
          class="cz"
          label="操作"
          width="200"
          height="40"
          fixed="right"
        >
          <template slot-scope="scope">
            <div>
              <el-button
                @click="detailClick(scope.row)"
                type="text"
                size="small"
                >详情</el-button
              ><el-button @click="editClick(scope.row)" type="text" size="small"
                >编辑</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="resetPassword(scope.row)"
              >
                重置密码</el-button
              >
              <!-- resetPasswordDialogVisible -->
              <!-- resetPwd -->
              <el-button
                style="color: #ff4444"
                @click="delConfirm(scope.row)"
                type="text"
                size="small"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[9, 27, 54]"
        :page-size="pageSize"
        layout="total, prev, pager, next, sizes"
        :total="tableData.length"
        style="float: right; margin-top: 20px"
      >
      </el-pagination>
    </div>
    <!-- 弹窗 -->
    <div id="tanchuang">
      <!-- #tanchuang>.el-dialog:nth -->
      <!-- 详情 -->
      <el-dialog
        title="详情"
        :visible.sync="dialogVisible"
        width="350px"
        top="0"
        style="border-radius: 20px"
        id="detail"
      >
        <div style="display: flex; flex-wrap: wrap; text-align: left">
          <div class="upIpfo">
            <p>公安监管单位编码:{{ detaile.GAJGDWBM }}</p>
            <p>统一社会信用代码:{{ detaile.tyshxydm }}</p>
          </div>
          <div class="upIpfo">
            <p>单位名称:{{ detaile.dwmc }}</p>
            <p>单位类型:{{ detaile.dwlx }}</p>
          </div>
          <div class="upIpfo">
            <p>行政区域:{{ detaile.xzqydm }}</p>
            <p>所属派出所:{{ detaile.department_name }}</p>
          </div>
          <div class="upIpfo">
            <p>实际办公地址:{{ detaile.sjdz }}</p>
            <p>登记状态:{{ detaile.djzt }}</p>
          </div>
          <div class="upIpfo">
            <p>法人代表证件号码:{{ detaile.fddbr_zjhm }}</p>
            <p class="text">法人代表手机号:{{ detaile.fddbrlxfs }}</p>
          </div>
          <div class="upIpfo">
            <p>法定代表人姓名:{{ detaile.fddbrxm }}</p>
            <p class="text">注册地址:{{ detaile.zcdz }}</p>
          </div>

          <div class="upIpfo">
            <p>经度:{{ detaile.sjdz_dqjd }}</p>
            <p>纬度:{{ detaile.sjdz_dqwd }}</p>
          </div>
          <div class="upIpfo">
            <p>登记机关:{{ detaile.djjg }}</p>
            <p>成立日期:{{ detaile.clrq }}</p>
          </div>
          <div class="upIpfo">
            <p>打卡范围:{{ detaile.distance }} 米</p>
            <p>备注信息:{{ detaile.remark }}</p>
          </div>
          <div class="upIpfo">
            <p>添加时间:{{ detaile.create_time }}</p>
          </div>
        </div>
      </el-dialog>
      <!-- 增加  编辑 -->
      <el-dialog
        :title="title"
        :visible.sync="addDialogVisible"
        style="border-radius: 20px !important"
        width="50%"
        top="0"
        :show-close="true"
        class="Adddialog"
        :close-on-press-escape="esc"
      >
        <el-form
          ref="addFormdata"
          :model="addFormdata"
          size="medium"
          label-width="200px"
          class="addFlight"
          :rules="rules"
        >
          <div class="addFormdataitem">
            <el-form-item label="单位名称:" prop="dwmc" required>
              <el-input
                v-model="addFormdata.dwmc"
                placeholder="请输入单位名称"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
            <el-form-item label="单位类型:" prop="dwlx" required>
              <el-select
                v-model="addFormdata.dwlx"
                clearable
                placeholder="请选择单位类型"
                style="width: 167px"
                @change="selects"
              >
                <el-option
                  v-for="item in dwlx"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="addFormdataitem">
            <!-- <el-form-item label="行政区域:" prop="xzqydm" required>
              <el-select
                v-model="addFormdata.xzqydm"
                clearable
                placeholder="请选择行政区域"
                style="width: 167px"
                @change="selectsXzqydm"
              >
                <el-option
                  v-for="item in xzqydm"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item label="所属派出所:" prop="department_id" required>
              <div class="block">
                <el-cascader
                  ref="xzCascader"
                  placeholder="请选择或搜索所属行政区域"
                  :options="optionsTwo"
                  :props="{ checkStrictly: true }"
                  filterable
                  :emitPath="emitPath"
                  clearable
                  style="float: left"
                  :show-all-levels="false"
                  v-model="addFormdata.department_id"
                  @change="handleChange"
                ></el-cascader>
              </div>
            </el-form-item>
            <el-form-item label="实际办公地址:" prop="sjdz" required>
              <el-input
                v-model="addFormdata.sjdz"
                placeholder="请输入实际办公地址"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </div>
          <div class="addFormdataitem">
            <el-form-item label="登记状态:" prop="djzt">
              <el-input
                v-model="addFormdata.djzt"
                placeholder="请输入登记状态"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
            <el-form-item label="法人代表姓名:" prop="fddbrxm" required>
              <el-input
                v-model="addFormdata.fddbrxm"
                placeholder="请输入法人代表姓名"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </div>
          <p class="addFormdataitem">
            <el-form-item label="法人代表手机号:" prop="fddbrlxfs" required>
              <el-input
                v-model="addFormdata.fddbrlxfs"
                placeholder="请输入法人代表手机号"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
            <el-form-item label="法人代表证件号码:" prop="fddbr_zjhm" required>
              <el-input
                v-model="addFormdata.fddbr_zjhm"
                placeholder="请输入证件号码"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </p>
          <p class="addFormdataitem">
            <el-form-item label="注册地址:" prop="zcdz" required>
              <el-input
                v-model="addFormdata.zcdz"
                placeholder="请输入注册地址"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
            <el-form-item label="登记机关:" prop="djjg">
              <el-input
                v-model="addFormdata.djjg"
                placeholder="请输入登记机关"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </p>
          <p class="addFormdataitem">
            <el-form-item label="经度:" prop="sjdz_dqjd" required>
              <el-input
                v-model="addFormdata.sjdz_dqjd"
                placeholder="请获取经度"
                clearable
                :style="{ width: '100%' }"
              >
                <template #append>
                  <el-button class="getLocation" @click="getLng">
                    获取</el-button
                  >
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="纬度:" prop="sjdz_dqwd" required>
              <el-input
                v-model="addFormdata.sjdz_dqwd"
                placeholder="请获取纬度"
                clearable
                :style="{ width: '100%' }"
              >
                <template #append>
                  <el-button class="getLocation" @click="getLng">
                    获取</el-button
                  >
                </template>
              </el-input>
            </el-form-item>
          </p>
          <p class="addFormdataitem">
            <el-form-item label="成立日期:" prop="clrq">
              <el-date-picker
                v-model="addFormdata.clrq"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                :style="{ width: '100%' }"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item
              label="统一社会信用代码:"
              prop="tyshxydm"
              label-width="200px"
              required
            >
              <el-input
                v-model="addFormdata.tyshxydm"
                placeholder="请输入统一社会信用代码"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </p>
          <p class="addFormdataitem">
            <el-form-item label="打卡范围:" prop="distance">
              <el-input
                placeholder="请输入打卡范围"
                v-model="addFormdata.distance"
                style="width: 100%; float: left"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="备注信息:" prop="remark">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="addFormdata.remark"
                style="width: 100%; float: left"
              >
              </el-input>
            </el-form-item>
          </p>
          <p class="addFormdataitem">
            <el-form-item
              v-if="!addDialogVisible"
              label="登录密码:"
              prop="password"
            >
              <el-input
                v-model="addFormdata.password"
                placeholder="请输入登录密码"
                clearable
                disabled
                show-password
                :style="{ width: '100%' }"
              >
                <template #append> </template
              ></el-input>
            </el-form-item>
          </p>
        </el-form>
        <div slot="footer">
          <button @click="cancel('addFormdata')" class="cancel">取消</button>
          <button
            type="primary"
            @click="handelConfirm('addFormdata')"
            class="confrim"
          >
            确定
          </button>
        </div>
      </el-dialog>
      <!-- 密码重置 -->
      <el-dialog
        title="重置密码"
        :visible.sync="resetPasswordDialogVisible"
        width="30%"
        top="0"
      >
        <span>是否重置密码？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="resetPasswordDialogVisible = false"
            >取 消</el-button
          >
          <el-button type="primary" @click="resetPwd">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 删除单位 -->
      <el-dialog
        title="删除单位"
        :visible.sync="delDialogVisible"
        width="30%"
        top="0"
      >
        <span>是否确认删除所选单位？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="delDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="ConfirmDel">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 多选删除 -->
      <el-dialog
        title="删除单位"
        :visible.sync="delItemVisible"
        width="30%"
        top="0"
      >
        <span>是否确认删除所选单位？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="delItemVisible = false">取 消</el-button>
          <el-button type="primary" @click="ConfirmDelItem">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div class="map">
      <el-dialog
        title="选取经纬度"
        :visible.sync="mapDialogVisible"
        :before-close="handleClose"
        style="border-radius: 20px"
        :show-close="false"
        top="0"
      >
        <MapContainer @getLocation="getLocation" />
        <div slot="footer">
          <button @click="cancelMap" class="cancel">取消</button>
          <button type="primary" @click="handelConfirmMap" class="confrim">
            确定
          </button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { saveAs } from "file-saver";
import * as XLSX from "xlsx/xlsx.mjs";
import MapContainer from "@/components/Map-location/index.vue";
import { Loading } from "element-ui";
import {
  addSchool,
  editSchool,
  delSchool,
  searchSchool,
  schoolsImport,
  resetPassword,
} from "@/api/school";
import { police } from "@/api/police.js";
// searchSchool
// import VueCookie from "vue-cookies";
import VueCookie from "vue-cookies";
// import bus from "../../common/bus";
export default {
  name: "WARN",
  components: { MapContainer },
  data() {
    var validateWorkName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入单位名称"));
      } else {
        callback();
      }
    };
    var validateWorkType = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请选择单位名称"));
      } else {
        callback();
      }
    };
    // validateGajgdwem
    // var validateGajgdwem = (rule, value, callback) => {
    //   if (value === "") {
    //     callback(new Error("请输入单位编码"));
    //   } else {
    //     callback();
    //   }
    // };
    // validateTyshxydm
    var validateTyshxydm = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入社会编码"));
      } else {
        callback();
      }
    };
    // validateDwlx
    var validateXzqydm = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入行政区域"));
      } else {
        callback();
      }
    };
    // validateSjdz
    var validateSjdz = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入实际办公地址"));
      } else {
        callback();
      }
    };
    // validateFddbrxm
    var validateFddbrxm = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入法人代表姓名"));
      } else {
        callback();
      }
    };
    // validateFddbrlxfs
    var validateFddbrlxfs = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入法人联系方式"));
      } else {
        callback();
      }
    };
    // validateFddbr_zhhm
    var validateFddbr_zhhm = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入证件号码"));
      } else {
        callback();
      }
    };
    // validateZcdz
    var validateZcdz = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入注册地址"));
      } else {
        callback();
      }
    };
    // validateSjdz_dqwd
    var validateSjdz_dqwd = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请获取纬度"));
      } else {
        callback();
      }
    };
    // validateSjdz_dqjd
    var validateSjdz_dqjd = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请获取经度"));
      } else {
        callback();
      }
    };
    // validateDjjg
    // var validateDjjg = (rule, value, callback) => {
    //   if (value === "") {
    //     callback(new Error("请输入登记机关"));
    //   } else {
    //     callback();
    //   }
    // };
    // validateClrq
    // var validateClrq = (rule, value, callback) => {
    //   if (value === "") {
    //     callback(new Error("请输入成立日期"));
    //   } else {
    //     callback();
    //   }
    // };
    // validatePawssWord
    // var validatePawssWord = (rule, value, callback) => {
    //   if (value === "") {
    //     callback(new Error("请输入登录密码"));
    //   } else {
    //     callback();
    //   }
    // };
    // validateSsjwsd
    var validateSsjwsd = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入所属派出所"));
      } else {
        callback();
      }
    };
    // validateDjzt
    // var validateDjzt = (rule, value, callback) => {
    //   if (value === "") {
    //     callback(new Error("请输入登记状态"));
    //   } else {
    //     callback();
    //   }
    // };
    // validateBeizhuInfo
    // var validateRemark = (rule, value, callback) => {
    //   if (value === "") {
    //     callback(new Error("请输入备注信息"));
    //   } else {
    //     callback();
    //   }
    // };
    return {
      esc: false,
      headers: { "Content-Type": "multipart/form-data;charset=UTF-8" },
      title: "",
      addTitle: "添加单位",
      editInfo: "编辑信息",
      ywlsh: "", // 重置密码中间件
      fileList: [],
      currentPage4: 4,
      // pages: {
      // 按页数查询数据
      currentPage: 1,
      pageSize: 9,
      pagesize: [9, 27, 54],
      value: "",
      dialogVisible: false,
      addDialogVisible: false, // 添加 编辑弹窗
      deleteChecked: false,
      mapDialogVisible: false, // 地图弹窗
      resetPasswordDialogVisible: false, // 密码重置弹窗
      delItemVisible: false,
      delDialogVisible: false, // 删除确认弹窗
      outDialogVisible: false,
      value2: false, // 审批默认通过
      // },
      dwlx: [
        {
          value: "初中",
          label: "初中",
        },
        {
          value: "小学",
          label: "小学",
        },
        {
          value: "幼儿园",
          label: "幼儿园",
        },
        {
          value: "高中",
          label: "高中",
        },
        {
          value: "九年一贯制",
          label: "九年一贯制",
        },
        {
          value: "十二年一贯制",
          label: "十二年一贯制",
        },
        {
          value: "职业高中",
          label: "职业高中",
        },
        {
          value: "中等技术学校",
          label: "中等技术学校",
        },
        {
          value: "成人中等专业学校",
          label: "成人中等专业学校",
        },
        {
          value: "特殊学校",
          label: "特殊学校",
        },
        {
          value: "教学点",
          label: "教学点",
        },
        {
          value: "完全中学",
          label: "完全中学",
        },
      ],
      xzqydm: [
        {
          text: "安次区",
          value: "安次区",
        },
        {
          text: "广阳区",
          value: "广阳区",
        },
        {
          text: "经济开发区",
          value: "经济开发区",
        },
        {
          text: "永清县",
          value: "永清县",
        },
        {
          text: "香河县",
          value: "香河县",
        },
        {
          text: "三河市",
          value: "三河市",
        },
        {
          text: "固安县",
          value: "固安县",
        },
        {
          text: "霸州市",
          value: "霸州市",
        },
        {
          text: "文安县",
          value: "文安县",
        },
        {
          text: "大城县",
          value: "大城县",
        },
        {
          text: "大厂回族自治县",
          value: "大厂回族自治县",
        },
        {
          text: "大学城",
          value: "大学城",
        },
      ],
      // 级联选择器
      emitPath: false,
      selectId: {
        dpid: "",
      },
      optionsOne: [],
      optionsTwo: [],
      addFormdata: {
        // GAJGDWBM: "", // 公安监管单位编码
        tyshxydm: "", // 统一社会信用代码
        dwmc: "", // 单位名称
        dwlx: "", // 单位类型
        fddbrxm: "", // 法定代表人姓名
        fddbrlxfs: "", // 法定代表人联系方式
        fddbr_zjhm: "", // 法人代表证件号码
        sjdz_dqwd: "", //纬度
        sjdz_dqjd: "", //经度
        sjdz: "", // 实际办公地址
        zcdz: "", // 注册地址
        djzt: "", // 登记状态
        djjg: "", // 登记机关
        department_id: "", // 所属派出所
        clrq: "", // 成立日期
        xzqydm: "", // 行政区域
        password: "123456",
        remark: "",
        distance: "",
      },
      formData: {
        dwmc: "",
        fddbrxm: "",
        dwlx: "",
        time: "",
        xzqydm: "",
        department_id: "",
      },
      SearchData: {
        dwmc: "",
        fddbrxm: "",
        dwlx: "",
        begin_time: "",
        end_time: "",
        department_id: "",
        xzqydm: "",
        paeg: 1,
        pagesize: 20,
      },
      detaile: {},
      excludeColumns: [""],
      tableData: [],
      datalist: [],
      deleteCheckedArr: [],
      deleteTtems: {},
      textarea: "",
      rules: {
        dwmc: [{ validator: validateWorkName, trigger: "blur" }],
        dwlx: [{ validator: validateWorkType, trigger: "change" }],
        // GAJGDWBM: [{ validator: validateGajgdwem, trigger: "blur" }],
        tyshxydm: [{ validator: validateTyshxydm, trigger: "blur" }],
        xzqydm: [{ validator: validateXzqydm, trigger: "blur" }],
        sjdz: [{ validator: validateSjdz, trigger: "blur" }],
        fddbrxm: [{ validator: validateFddbrxm, trigger: "blur" }],
        fddbrlxfs: [{ validator: validateFddbrlxfs, trigger: "blur" }],
        fddbr_zjhm: [{ validator: validateFddbr_zhhm, trigger: "blur" }],
        zcdz: [{ validator: validateZcdz, trigger: "blur" }],
        sjdz_dqwd: [{ validator: validateSjdz_dqwd, trigger: "blur" }],
        sjdz_dqjd: [{ validator: validateSjdz_dqjd, trigger: "blur" }],
        // djjg: [{ validator: validateDjjg, trigger: "blur" }],
        // clrq: [{ validator: validateClrq, trigger: "blur" }],
        // password: [{ validator: validatePawssWord, trigger: "blur" }],
        department_id: [{ validator: validateSsjwsd, trigger: "blur" }],
        // djzt: [{ validator: validateDjzt, trigger: "blur" }],
        // remark: [{ validator: validateRemark, trigger: "blur" }],
      },
    };
  },
  watch: {},
  created() {},
  mounted() {
    this.initSchoolList();
    this.initPolice();
  },
  methods: {
    // 所属派出所初始化
    initPolice() {
      let that = this;
      this.selectId.token = VueCookie.get("token");
      police(this.selectId).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          res.data.children.forEach((item) => {
            // let num = item.label.indexOf("河北省廊坊市");
            item.label = item.label.slice(6);
            if (item.children != undefined) {
              item.children.forEach((m) => {
                // console.log(m);
                m.label = m.label.slice(6);
              });
            }
            console.log(item.children);
          });
          that.optionsOne.push(res.data);
          that.optionsTwo.push(res.data);
          // that.optionsOne.children = ;
        } else if (res.code == 401) {
          this.$message({
            type: "warn",
            message: res.message,
            duration: 2000,
          });
          // alert(res.message);
        }
      });
    },
    getCheckedNodes(e) {
      // console.log(e);
    },
    handleChangexz(e) {
      // console.log(e[e.length - 1]);
      if (e[e.length - 1] != undefined) {
        this.formData.department_id = e[e.length - 1];
      } else {
        this.formData.department_id = "";
      }
    },
    handleChange(e) {
      // console.log(e);
      if (e[e.length - 1] != undefined) {
        this.addFormdata.department_id = e[e.length - 1];
      } else {
        this.addFormdata.department_id = "";
      }
    },
    getLocation(val) {
      // console.log(val); // 获取的经纬度
      this.addFormdata.sjdz_dqwd = val.lat;
      this.addFormdata.sjdz_dqjd = val.lng;
    },
    async initSchoolList() {
      let that = this;
      let loadingInstance = Loading.service({
        target: document.querySelector(".el-table__body-wrapper"),
        text: "加载中",
      });
      // const token = VueCookie.get("token");
      await searchSchool(this.SearchData).then((res) => {
        // console.log(res);
        if (res.code == "200") {
          that.$nextTick(() => {
            that.tableData = res.data.reverse();
            // 以服务的方式调用的 Loading 需要异步关闭
            // console.log("成功");
            loadingInstance.close();
          });
        } else {
          // console.log("失败");

          loadingInstance.close();
        }
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    // 查询
    submitForm(formData) {
      // console.log(formData);
      let that = this;
      this.SearchData.dwlx = formData.dwlx;
      this.SearchData.dwmc = formData.dwmc;
      this.SearchData.fddbrxm = formData.fddbrxm;
      this.SearchData.xzqydm = formData.xzqydm;
      this.SearchData.department_id = formData.department_id;
      this.SearchData.token = this.$VueCookies.get("token");
      // this.SearchData.page = 1;
      // this.SearchData.pagesize = 100;
      if (formData.time == [] || formData.time == null) {
        this.SearchData.end_time = "";
        this.SearchData.begin_time = "";
      } else {
        this.SearchData.end_time = formData.time[1];
        this.SearchData.begin_time = formData.time[0];
      }

      // console.log(this.SearchData);
      let loadingInstance = Loading.service({
        target: document.querySelector(".el-table__body-wrapper"),
        text: "搜索中",
      });
      // searchSchool
      searchSchool(this.SearchData).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: res.message,
            duration: 1500, // 延迟1.5秒钟。。。。。。。。。。。。。。。。。。。
          });
          that.currentPage = 1;
          that.tableData = res.data.res;
          console.log(that.tableData);
          // that.$nextTick(() => {
          loadingInstance.close();
          // });
        } else if (res.code == 400) {
          (that.tableData = []),
            that.$nextTick(() => {
              loadingInstance.close();
              this.$message({
                type: "warn",
                message: res.message,
                duration: 2000,
              });
            });
        }
      });
      // console.log(formData);
    },
    // 查询重置
    resetForm() {
      this.$refs["elForm"].resetFields();
      this.currentPage = 1;
      this.initSchoolList();
    },
    // 详情
    detailClick(row) {
      console.log(row);
      this.dialogVisible = true;
      this.detaile = row;
    },
    // 编辑
    editClick(row) {
      this.addDialogVisible = true;
      this.title = this.editInfo;
      console.log(row);
      this.addFormdata = row;
    },
    // 删除弹窗
    delConfirm(row) {
      this.ywlsh = row.ywlsh;
      console.log(this.deleteCheckedArr);
      this.delDialogVisible = true;
    },
    // 单选删除
    ConfirmDel() {
      console.log(this.deleteCheckedArr.length);
      let that = this;
      this.delDialogVisible = false;
      let delItem = {
        ywlsh: "" + this.ywlsh + "",
        token: VueCookie.get("token"),
      };
      delSchool(delItem).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          that.initSchoolList();
          this.$message({
            type: "success",
            message: res.message,
            duration: 2000,
          });
        } else if (res.code == 400) {
          this.$message({
            type: "warn",
            message: res.message,
            duration: 2000,
          });
        }
      });
    },

    // 多选删除
    // deleteTtem() {
    //   this.delItemVisible = true;
    //   let ywlsh = "";
    //   this.deleteCheckedArr.forEach((item) => {
    //     ywlsh += "" + item.ywlsh + "," + "";
    //   });
    //   let delItem = {
    //     ywlsh: ywlsh.slice(0, ywlsh.length - 1),
    //     token: VueCookie.get("token"),
    //   };
    //   console.log(delItem);
    //   this.deleteTtems = delItem;
    // },
    ConfirmDelItem() {
      console.log(this.deleteTtems);
      console.log("多选删除确认");
      // delSchool(this.deleteTtems).then((res) => {
      //   // console.log(res);
      //   if (res.code == 200) {
      //     this.initSchoolList();
      //     this.$message({
      //       type: "success",
      //       message: res.message,
      //       duration: 2000,
      //     });
      //   } else if (res.code == 400) {
      //     this.$message({
      //       type: "warn",
      //       message: res.message,
      //       duration: 2000,
      //     });
      //   }
      // });
    },
    // 多选
    handleSelectionChange(val) {
      this.deleteCheckedArr = val;
    },
    // 分页操作
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      // let loadingInstance = Loading.service({
      //   target: document.querySelector(".el-table__body-wrapper"),
      //   text: "搜索中",
      // });
      let that = this;
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      console.log(this.pageSize);
      if (Math.ceil(this.tableData.length / this.pageSize) == val) {
        console.log("最后一页");

        this.SearchData.pagesize = parseInt(this.SearchData.pagesize) + 20;
        this.SearchData.token = this.$VueCookies.get("token");
        // searchSchool
        searchSchool(this.SearchData).then((res) => {
          // console.log(res);
          if (res.code == 200) {
            this.currentPage = val;

            that.tableData = res.data.res;
            console.log(that.tableData);
            if (this.SearchData.pagesize > res.data.res.length) {
              this.$message({
                showClose: false,
                message: "已经最后一页",
                type: "warning",
              });
            }
          } else if (res.code == 400) {
            (that.tableData = []),
              that.$nextTick(() => {
                // loadingInstance.close();
                this.$message({
                  type: "warn",
                  message: res.message,
                  duration: 2000,
                });
              });
          }
        });
      }
      // if(val == )
    },
    // 单位类型选择
    select(e) {
      // console.log(e);
      this.formData.dwlx = e;
    },
    selects(e) {
      // console.log(e);
      this.addFormdata.dwlx = e;
    },
    selectsXzqydm(e) {
      this.addFormdata.xzqydm = e;
    },
    // 添加单位弹窗
    addUnit() {
      this.initformdata();
      this.title = this.addTitle;
      this.addDialogVisible = true;
      this.$nextTick(() => {
        this.$refs.addFormdata.resetFields();
      });
    },
    // 获取纬度
    getLat() {},
    // 获取经度
    getLng() {
      this.mapDialogVisible = true;
    },
    cancel(formName) {
      // this.$refs.addFormdata.resetFields();

      this.$nextTick(() => {
        this.addDialogVisible = false;

        this.initformdata();
        console.log(this.addFormdata);
        console.log("11");
      });
    },
    handelConfirmMap() {
      this.mapDialogVisible = false;
      this.$emit("init", this.handleClick);
    },
    cancelMap() {
      this.mapDialogVisible = false;
    },
    // 重置密码弹窗
    resetPassword(row) {
      this.ywlsh = row.ywlsh;
      this.resetPasswordDialogVisible = true;
    },
    // 重置密码
    resetPwd() {
      let ywlsh = {
        ywlsh: this.ywlsh,
        token: VueCookie.get("token"),
      };
      this.resetPasswordDialogVisible = false;
      resetPassword(ywlsh).then(() => {
        // console.log(res.data);
        alert("重置成功");
      });
    },
    // 删除单位弹窗调用
    // 删除单位
    // 添加单位
    async handelConfirm(addFormdata) {
      // console.log(this.addFormdata);
      this.addFormdata.token = VueCookie.get("token");
      let that = this;
      await this.$refs[addFormdata].validate((valid) => {
        // console.log(valid);
        if (valid) {
          that.addDialogVisible = false;
          if (that.title == "添加单位") {
            addSchool(that.addFormdata).then((res) => {
              this.initSchoolList();
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: res.message,
                  duration: 2000,
                });
                that.$refs[addFormdata].resetFields();
              } else if (res.code == 400) {
                this.$message({
                  type: "warn",
                  message: res.message + ",请勿重复添加",
                  duration: 2000,
                });
              }
            });
          } else if (that.title == "编辑信息") {
            console.log("编辑信息");
            editSchool(that.addFormdata).then((res) => {
              this.initSchoolList();
              this.initformdata();
              that.$refs[addFormdata].resetFields();
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: res.message,
                  duration: 2000,
                });
              } else {
                this.$message({
                  type: "warn",
                  message: res.message,
                  duration: 2000,
                });
              }
            });
          }
        } else {
          return false;
        }
      });
    },

    // 表单初始化
    initformdata() {
      this.addFormdata = {
        // GAJGDWBM: "", // 公安监管单位编码
        tyshxydm: "", // 统一社会信用代码
        dwmc: "", // 单位名称
        dwlx: "", // 单位类型
        fddbrxm: "", // 法定代表人姓名
        fddbrlxfs: "", // 法定代表人联系方式
        fddbr_zjhm: "", // 法人代表证件号码
        sjdz_dqwd: "", //纬度
        sjdz_dqjd: "", //经度
        sjdz: "", // 实际办公地址
        zcdz: "", // 注册地址
        djzt: "", // 登记状态
        djjg: "", // 登记机关
        department_id: "", // 所属派出所id
        clrq: "", // 成立日期
        xzqydm: "", // 行政区域
        password: "123456", // 初始密码
        remark: "", // 备注信息
        distance: "", // 默认打卡距离
      };
    },
    // excel 上传     // 表格导入
    // 上传前对文件的格式和大小的判断
    beforeAvatarUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1; // 限制上传文件大小
      if (isLt1M) {
        return true;
      }
      this.$message({
        message: "请不要上传大于1M的文件",
        type: "warning",
      });
    },
    async handle(file) {
      let that = this;
      // console.log(file);
      const formData = new FormData(); //FormData对象，添加参数只能通过append('key', value)的形式添加
      formData.append("file", file.raw); //添加文件对象
      schoolsImport(formData)
        .then((res) => {
          if (res.code == "200" && res.data) {
            // console.log(res);
            this.$message.success("导入成功");
          } else {
            this.$message({
              type: "warn",
              message: res.message,
              duration: 2000,
            });
          }
        })
        .catch(() => {
          // console.log(err);
          that.$message({
            type: "error",
            message: "导入失败",
          });
        });
    },
    // 下载表格
    downLoad() {
      //  .table要导出的是哪一个表格
      let loadingInstance = Loading.service({
        target: document.querySelector(".el-table__body-wrapper"),
        text: "下载中,请稍后",
      });
      var xlsxParam = { raw: true }; // 控制过长的字段在表格中正常显示
      let tableDom = document.querySelector("#exportTable").cloneNode(true);
      let tableHeader = tableDom.querySelector(".el-table__header-wrapper");
      let tableBody = tableDom.querySelector(".el-table__body");
      tableHeader.childNodes[0].append(tableBody.childNodes[1]);
      let headerDom = tableHeader.childNodes[0].querySelectorAll("th");
      // 移除左侧checkbox的节点
      if (headerDom[0].querySelectorAll(".el-checkbox").length > 0) {
        headerDom[0].remove();
      }
      for (let key in headerDom) {
        if (headerDom[key].innerText === "操作") {
          headerDom[key].remove();
        }
      }
      // 清理掉checkbox 和操作的button
      let tableList =
        tableHeader.childNodes[0].childNodes[2].querySelectorAll("td");
      for (let key = 0; key < tableList.length; key++) {
        if (
          tableList[key].querySelectorAll(".el-checkbox").length > 0 ||
          tableList[key].querySelectorAll(".el-button").length > 0
        ) {
          tableList[key].remove();
        }
      }
      var wb = XLSX.utils.table_to_book(tableHeader, xlsxParam);
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        //  fddbrxm+'.xlsx'表示导出的excel表格名字
        this.$nextTick(() => {
          loadingInstance.close();
        });
        // console.log("导出完成");
        this.$message({
          type: "warn",
          message: "导出完成",
          duration: 2000,
        });
        saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          "学校信息" + ".xlsx"
        );
      } catch (e) {
        if (typeof e !== "undefined") console.log(e, wbout);
      }

      return wbout;
    },
    // 全部导出 将所有的数据放在一张表上  完成之后初始化分页
    async exportExcel() {
      alert("数据导出中,请耐心等待");
      this.$message({
        type: "info",
        message: "数据导出中,请耐心等待",
        duration: 5000,
      });
      let that = this;

      let pagessize = that.pageSize;
      that.pageSize = that.tableData.length;

      await setTimeout(function () {
        that.downLoad();
        that.tabbleInit(pagessize);
      }, 0);
    },
    tabbleInit(pagessize) {
      this.pageSize = pagessize;
      // console.log(pagessize);
    },
    // 下载导入模板
    downLoadDemo() {
      const data = [
        {
          所属派出所: null,
          单位名称: null,
          统一社会信用代码: null,
          单位类型: null,
          法定代表人姓名: null,
          法定代表人证件号码: null,
          法定代表人联系方式: null,
          成立日期: null,
          注册地址: null,
          实际办公地址: null,
          打卡范围: null,
          经度: null,
          纬度: null,
          登记机关: null,
          登记状态: null,
        },
      ];
      // 创建一个工作簿
      const wb = XLSX.utils.book_new();
      // 创建一个工作表
      const ws = XLSX.utils.json_to_sheet(data);
      // 将工作表添加到工作簿中
      XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
      // 将工作簿转换为二进制数据流
      const wbout = XLSX.write(wb, { bookType: "xls", type: "array" });
      // 将二进制数据流转换为 Blob 对象
      const blob = new Blob([wbout], { type: "application/octet-stream" });
      // 保存 Blob 对象为文件
      saveAs(blob, "学校信息模板.xls");
    },
  },
};
</script>
<style scoped lang="scss">
.admin-top {
  padding: 10px;
  background-color: white;
  border-radius: 10px;
  width: 100%;
  height: 100px;
  overflow: auto;
  box-sizing: border-box;
  height: auto;
}
.admin-top {
  width: calc(100%);
}
.admin-top-one {
  display: flex;
  flex-wrap: wrap;
}
#out {
  /deep/.el-dialog {
    width: 30% !important;
    border-radius: 15px !important;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
// #tanchuang {
//   /deep/.el-dialog:nth-of-type(1) {
//     width: 25% !important;
//     border-radius: 15px !important;
//     position: absolute;
//     left: 50%;
//     top: 50%;
//     transform: translate(-50%, -50%);
//   }
// }
#detail {
  /deep/.el-dialog {
    width: 40% !important;
    border-radius: 15px !important;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
::v-deep.admin-top-one .el-form-item__label:nth-last-of-type(1) {
  width: 115px !important;
  text-align: left;
}
.el-table thead {
  height: 40px !important;
}
::v-deep.el-range-editor--medium .el-range-separator {
  line-height: 21px;
  font-size: 14px;
  position: relative;
  top: 4px;
}
::v-deep .el-range__icon {
  line-height: 21px;
}
.el-table {
  width: calc(100%);
}
::v-deep.el-table th.el-table__cell {
  background-color: #ecf5ff !important;
  width: 64px;
  height: 21px;
  font-size: 16px;
  color: #13213b;
}
.admin-content {
  overflow: auto;
  margin-top: 20px;
  height: auto !important;
  background-color: white;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
}

::v-deep.el-table .el-table__cell {
  padding: 4px 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: center;
  line-clamp: 2;
  /*第几行裁剪*/
  -webkit-box-orient: vertical;
}
.upIpfo {
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.upIpfo p {
  color: #13213b;
  font-size: 14px;
  font-weight: 400;
  width: 50%;
  margin-top: 10px;
  display: inline-block;
  span {
    display: inline-block;
    width: 105px;
    text-align: right;
  }
}

::v-deep.el-table__header-wrapper {
  border-radius: 10px 10px 0 0;
}
::v-deep.el-table {
  border: 1px #d7dbe3 solid;
  border-radius: 10px;
}
::v-deep.el-input--medium .el-input__icon {
  line-height: 30px;
}
::v-deep.has-gutter tr th {
  color: black;
  text-align: center;
  border: 1px d7dbe3 solid;
  background-color: #ecf5ff;
}

::v-deep.is-leaf {
  border: 1px #d7dbe3 solid !important;
  border-top: none !important;
  border-left: none !important;
}
::v-deep.el-table__cell {
  text-align: center !important;
}
/deep/.el-dialog {
  border-radius: 15px !important;
  width: 50% !important;
  height: auto !important;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
/deep/ [data-v-13877386] .el-dialog {
  width: 50% !important;
  height: auto !important;
  border-radius: 15px !important;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
/deep/ [data-v-2ba5fe30] .el-dialog {
  width: 50% !important;
  border-radius: 15px !important;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
/deep/.el-table tr {
  height: 46px !important;
}
/deep/.el-dialog__header {
  text-align: left;
  font-weight: 600;
}
.el-dialog__body {
  padding: 0 20px 10px 20px !important;
  height: 500px !important;
}

::v-deep.el-input--suffix .el-input__inner {
  padding-right: 0px;
}
::v-deep.el-range-editor.el-input__inner {
  position: relative !important;
  width: 90% !important;
}
::v-deep.el-input__inner {
  border: 1px solid #d7dbe3 !important;
  background-color: white !important;
}
.rowText {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /*第几行裁剪*/
  -webkit-box-orient: vertical;
}

.btn {
  // margin-left: 10px;
  // width: 108px;
  height: 36px;
  background-color: #126bff;
  border-radius: 8px 8px 8px 8px;
  opacity: 1;
  color: #ffffff;
  font-size: 16px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn:nth-of-type(1) {
  margin-left: 0px;
  margin-right: 10px;
}
.btn:nth-of-type(4) {
  background-color: #ff4444 !important;
}
.addFormdata {
  display: flex;
}
.addFormdataitem {
  width: 100%;
  display: flex;
  height: 60px;
}
.addFormdataitem > .el-form-item {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

::v-deep.addFormdataitem .el-form-item__content {
  margin-left: 0px !important;
  width: 50% !important;
}
.addFormdata .el-form-item {
  display: flex;
  width: 50% !important;
}
::v-deep.addFormdata .el-form-item__content {
  margin-left: 60px !important;
}
.el-form-item--medium .el-form-item__content {
  width: 100% !important;
}
::v-deep.el-form-item__content {
  width: 100% !important;
}

.addFormdata .el-select {
  width: 100% !important;
}
::v-deep.addFormdata .el-form-item__label {
  width: 312px !important;
}

.el-input-group__append,
.el-input-group__prepend {
  padding: 0 10px;
}
/deep/.el-input__prefix {
  position: relative;
  left: -5;
  top: -36px;
}
::v-deep.el-textarea__inner {
  position: relative;
  right: 20px !important;
}
#dialog .el-form div {
  color: red !important;
}
.addFlight {
  display: flex;
  flex-wrap: wrap;
}

::v-deep.addFlight .addFormdataitem .el-select {
  width: 100% !important;
}
.addFlight .addFormdataitem .el-form-item {
  margin: 0 !important;
  ::v-deep .el-form-item__label {
    width: 140px !important;
  }
  ::v-deep .el-input-group__append {
    width: 25px !important;
    background: rgba(18, 107, 255, 0.05);
    border-radius: 0px 6px 6px 0px;
    opacity: 1;
    border: 1px solid #126bff;
    color: #126bff;
    position: relative;
  }
}
::v-deep.el-dialog__header {
  .el-dialog__title {
    color: red !important;
  }
}
.el-button--text {
  color: #126bff;
}
#ccBtn {
  /deep/.el-form-item__content {
    width: 200px !important;
  }
}
/ddep/#ccBtn > div {
  width: 123px !important;
}
#detail {
  /deep/.el-dialog__body {
    padding: 0 10px 20px 20px !important;
  }
  /deep/.el-dialog {
    width: 650px !important;
  }
}
</style>

